<template>
  <h3>路由Query参数 (通过嵌套及命名路由演示)</h3>

  <div class="nav">
    <router-link class="link" :to="{name: 'routequeryhome', query: {msg: msg, type: type}}">测试主页</router-link>
    <router-link class="link" :to="`/routequery/about?usrid=${id}`">关于页面</router-link>
  </div>

  <router-view/>

  <hr>
  <p>
    注意:<br>
    1. 路由Query参数两种方式传入: (格式化)字符串和对象方式.<br>
    2. 路由Query参数接收时可以直接用 $route.query 接收,也可以在路由表中添加配置对象props,然后在视图中用props配置项接收.配置例子如下所示:<br>
    &nbsp;&nbsp;&nbsp;&nbsp;props: route=>({msg: route.query.msg, type: route.query.type})<br>
    &nbsp;&nbsp;&nbsp;&nbsp;props传参的官方文档: <a href="https://router.vuejs.org/zh/guide/essentials/passing-props.html"><b>将 props 传递给路由组件</b></a><br> 
  </p>
  
</template>

<script>
import {ref} from 'vue'

export default {
  setup() {
    let msg = ref('传给测试主页的内容.')
    let type = ref('test')
    let id = ref(1234)
    return {msg, type, id}
  },
}
</script>

<style scoped>

.nav {
  padding: 0.3rem;
  float: left;
}

.link {
  display: block;
  height: 32px;
  width: 100px;
  line-height: 32px;
  margin-left: 10px;
  text-align: center;
}

.router-link-active {
  font-weight: bold;
  color: orange;
  background-color: #205081;
  border-radius: 2px;
}

.router-link-active:hover {
  background-color: #3b73af;
}

.router-link-exact-active {
  color: whitesmoke;
}

</style>